body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.container {
    background: rgba(0, 0, 0, 1);
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(white 1px, transparent 0), linear-gradient(90deg, white 1px, transparent 0);
    background-size: 30px 30px;
    perspective: 201px; /* 透视属性要放在父元素 */
}

.demo {
    width: 200px;
    height: 200px;
    background: red;
    text-align: center;
    line-height: 200px;
}

#div1 {
    transform-style: preserve-3d;
    transform-origin: 50% 0;
    transform: translateZ(1px);
    /* transform: rotateY(45deg);  */
    /* 没有透视值的情况下，如果没有内部文字看起来就像是2D转换一样 */
}